import { Calc } from '@/api'
import { Button, Form, Input } from 'react-vant'
import { Helmet, useMutation } from 'umi'

export default function PageForm3() {
  const [form] = Form.useForm()

  // #计算
  const { mutate: calc, isLoading: isCalcLoading } = useMutation({
    mutationFn: Calc,
    onSuccess: (res) => {
      const { kdcb, ldzj, hbzq } = res
      form.setFieldValue('kdcb', kdcb)
      form.setFieldValue('ldzj', ldzj)
      form.setFieldValue('hbzq', hbzq)
    },
  })

  const handleSubmit = (values: any) => {
    calc({
      type: 3,
      data: {
        ...values,
      },
    })
  }

  return (
    <>
      <Helmet>
        <title>投资回报计算</title>
      </Helmet>

      <section className="relative p-4 min-h-screen">
        <Form
          initialValues={{
            yye: undefined,
          }}
          form={form}
          onFinish={handleSubmit}
          footer={(
            <footer className="mt-6">
              <Button round nativeType="submit" loading={isCalcLoading} type="primary" block>
                开始计算
              </Button>
            </footer>
          )}
        >

          <div className="overflow-hidden bg-white rounded-lg">
            <Form.Item
              labelWidth={120}
              label="现有资金"
              name="xyzj"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入现有资金" suffix="元" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="转让费"
              name="zrf"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入转让费" suffix="元" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="设计费"
              name="sjf"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入设计费" suffix="元" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="厨房工程"
              name="cfgc"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入厨房工程" suffix="元" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="装修"
              name="zx"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入装修" suffix="元" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="家具软装"
              name="jjrz"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入家具软装" suffix="元" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="设备"
              name="sb"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入设备" suffix="元" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="器具"
              name="qj"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入器具" suffix="元" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="押金"
              name="yj"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入押金" suffix="元" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="租金"
              name="zj"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入租金" suffix="元" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="点评商户通"
              name="dpkdb"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入点评商户通" suffix="元" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="食材进货"
              name="scjh"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入食材进货" suffix="元" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="预留推广费"
              name="yltgf"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入预留推广费" suffix="元" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="其他费用"
              name="qtfy"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入其他费用" suffix="元" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="预计营收(月）"
              name="yjys"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入预计营收(月）" suffix="元" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="预计利润率"
              name="yjlrl"
              rules={[
                {
                  type: 'number',
                  transform: value => Number(value),
                  min: 0.1,
                  max: 99.9,
                  message: '必须在0.1%到99.9%之间',
                },
              ]}
            >
              <Input clearable placeholder="请输入预计利润率" suffix="%" />
            </Form.Item>

          </div>

          <div className="overflow-hidden mt-4 rounded-lg">
            <Form.Item
              labelWidth={120}
              label="开店成本"
              name="kdcb"
            >
              <Input placeholder="待计算" readOnly suffix="元" className="font-bold" />
            </Form.Item>
            <Form.Item
              labelWidth={120}
              name="ldzj"
              label="流动资金"
            >
              <Input placeholder="待计算" readOnly suffix="元" className="font-bold" />
            </Form.Item>
            <Form.Item
              labelWidth={120}
              name="hbzq"
              label="回本周期"
            >
              <Input placeholder="待计算" readOnly suffix="月" className="font-bold" />
            </Form.Item>
          </div>

        </Form>
      </section>
    </>
  )
}
